<template>
  <div class="people-page">
    <div class="header">
      <h1>选择用餐人数</h1>
    </div>
    
    <div class="people-selector">
      <div class="count-display">
        <span class="count">{{ peopleCount }}</span>
        <span class="label">人</span>
      </div>
      
      <div class="buttons">
        <button @click="decrease" class="count-btn">-</button>
        <button @click="increase" class="count-btn">+</button>
      </div>
    </div>
    
    <div class="actions">
      <button @click="next" class="next-btn">开始点餐</button>
    </div>
  </div>
</template>

<script>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useOrderStore } from '../store/orderStore'

export default {
  name: 'PeoplePage',
  setup() {
    const router = useRouter()
    const orderStore = useOrderStore()
    
    const peopleCount = computed(() => orderStore.peopleCount)
    
    const increase = () => {
      orderStore.setPeopleCount(peopleCount.value + 1)
    }
    
    const decrease = () => {
      if (peopleCount.value > 1) {
        orderStore.setPeopleCount(peopleCount.value - 1)
      }
    }
    
    const next = () => {
      router.push('/menu')
    }
    
    return {
      peopleCount,
      increase,
      decrease,
      next
    }
  }
}
</script>

<style scoped>
.people-page {
  padding: 20px;
  text-align: center;
}

.header h1 {
  color: #333;
  margin-bottom: 30px;
}

.people-selector {
  margin: 40px 0;
}

.count-display {
  margin-bottom: 30px;
}

.count {
  font-size: 48px;
  font-weight: bold;
  color: #42b983;
}

.label {
  font-size: 24px;
  color: #666;
  margin-left: 10px;
}

.buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.count-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid #42b983;
  background-color: white;
  font-size: 24px;
  color: #42b983;
  cursor: pointer;
}

.count-btn:hover {
  background-color: #42b983;
  color: white;
}

.actions {
  margin-top: 40px;
}

.next-btn {
  background-color: #42b983;
  color: white;
  border: none;
  padding: 12px 40px;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

.next-btn:hover {
  background-color: #359c6d;
}
</style>